<template>
  <div class="content">
    <div class="logo">
      <img src="../assets/images/logo.png" alt="系统logo">
    </div>
    <div class="login_form">
      <h1>文件管理系统</h1>
      <el-form :rules="rules" ref="loginFormRef" size="large" :model="accountForm" label-width="auto">
        <el-form-item prop="username" label="账号：">
          <el-input placeholder="请输入账号" size="large" v-model="accountForm.username" clearable />
        </el-form-item>
        <el-form-item prop="password" label="密码：">
          <el-input placeholder="请输入密码" size="large" v-model="accountForm.password" show-password clearable />
        </el-form-item>
      </el-form>
      <el-button type="primary" size="large" class="login-button" @click="handleLogin" :loading="loading"
        :disabled="loading">
        登录
      </el-button>
      <div class="forgot-password">
        <!-- /forgot-password -->
        <router-link to="#">忘记密码？</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue'
import { ElMessage, ElLoading } from 'element-plus'
import { useRouter } from 'vue-router'
import api from "@/api/httpApi.js"

// 表单数据
const accountForm = reactive({
  // username: 'zxwl1001',
  // password: 'zxwl1001'
  // username: 'testStaff',
  // username: 'testAdmin',
  // password: 'qwe123'
  // username: '',
  // password: ''
})

// 表单引用
const loginFormRef = ref(null)

// 加载状态
const loading = ref(false)

// 路由
const router = useRouter()

// 验证规则
const rules = reactive({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 4, max: 20, message: '账号长度为4-20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' }
  ]
})

// 登录处理
const handleLogin = async () => {
  // 表单验证
  await loginFormRef.value.validate()
  // 显示加载状态
  loading.value = true

  // 调用登录API
  await api.LoginAPI(accountForm).then((res) => {
    if (res.status === 1) {
      // 登录成功处理 {
      // 存储token和用户信息
      sessionStorage.setItem('token', res.data.token)
      sessionStorage.setItem('userInfo', JSON.stringify(res.data.user))

      // 显示成功消息
      ElMessage.success('登录成功，正在跳转...')

      // 延迟跳转
      setTimeout(() => {
        if (res.data.user.rank.rankname == "成员") {
          router.push('/home')
        } else {
          router.push('/admin')
        }
      }, 1500)
    } else {
      ElMessage.error('登录失败，请检查账号和密码')
      loading.value = false
    }



  }).catch((error) => {
    // 处理验证错误或API错误
    if (error.name === 'ValidationError') {
      console.log('验证失败:', error)
    } else {
      console.error('登录请求失败:', error)
      ElMessage.error('服务器连接失败，请稍后再试')
    }
    loading.value = false
  })
}
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100vh;
  background-image: url('../assets/images/BG.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;

  .logo {
    position: absolute;
    top: 40px;
    left: 40px;

    img {
      width: 265px;
    }
  }

  .login_form {
    width: 456px;
    height: 340px;
    background-color: #fff;
    position: absolute;
    right: 50%;
    top: 50%;
    border-radius: 5px;
    transform: translate(50%, -50%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 20px 40px;

    h1 {
      text-align: center;
      margin-bottom: 20px;
      font-size: 32px;
      font-weight: 600;
      letter-spacing: 6px;
    }

    .login-button {
      width: 100%;
      margin-bottom: 20px;
      background-color: #337ECC;
      border: none;

      &:hover {
        background-color: #4892e2;
      }
    }

    .forgot-password {
      text-align: right;
      margin-bottom: 30px;

      a {
        color: #409eff;
        font-size: 14px;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>